/* ColorUi for MP-weixin v2.1.4 | by 文晓港 2019年4月25日19:15:42 仅供学习交流，如作它用所承受的法律责任一概与作者无关 使用ColorUi开发扩展与插件时，请注明基于ColorUi开发 （QQ交流群：240787041） */
/* ================== 初始化 ==================== */
 body {
    /* Color 可以自定义相关配色 */
    /* var属性兼容性 --> https://www.caniuse.com/#feat=css-variables */
    /* 标准色 */
     --red: #e54d42;
     --orange: #f37b1d;
     --yellow: #fbbd08;
     --olive: #8dc63f;
     --green: #39b54a;
     --cyan: #1cbbb4;
     --blue: #0081ff;
     --purple: #6739b6;
     --mauve: #9c26b0;
     --pink: #e03997;
     --brown: #a5673f;
     --grey: #8799a3;
     --black: #333333;
     --darkGray: #666666;
     --gray: #aaaaaa;
     --ghostWhite: #f1f1f1;
     --white: #ffffff;
    /* 浅色 */
     --redLight: #fadbd9;
     --orangeLight: #fde6d2;
     --yellowLight: #fef2ce;
     --oliveLight: #e8f4d9;
     --greenLight: #d7f0db;
     --cyanLight: #d2f1f0;
     --blueLight: #cce6ff;
     --purpleLight: #e1d7f0;
     --mauveLight: #ebd4ef;
     --pinkLight: #f9d7ea;
     --brownLight: #ede1d9;
     --greyLight: #e7ebed;
    /* 渐变色 */
     --gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
     --gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
     --gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
     --gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
     --gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
     --gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
    /* 阴影透明色 */
     --ShadowSize: 3px 3px 4px;
     --redShadow: rgba(204, 69, 59, 0.2);
     --orangeShadow: rgba(217, 109, 26, 0.2);
     --yellowShadow: rgba(224, 170, 7, 0.2);
     --oliveShadow: rgba(124, 173, 55, 0.2);
     --greenShadow: rgba(48, 156, 63, 0.2);
     --cyanShadow: rgba(28, 187, 180, 0.2);
     --blueShadow: rgba(0, 102, 204, 0.2);
     --purpleShadow: rgba(88, 48, 156, 0.2);
     --mauveShadow: rgba(133, 33, 150, 0.2);
     --pinkShadow: rgba(199, 50, 134, 0.2);
     --brownShadow: rgba(140, 88, 53, 0.2);
     --greyShadow: rgba(114, 130, 138, 0.2);
     --grayShadow: rgba(114, 130, 138, 0.2);
     --blackShadow: rgba(26, 26, 26, 0.2);
     background-color: var(--ghostWhite);
     font-size: 14px;
     color: var(--black);
     font-family: Helvetica Neue, Helvetica, sans-serif;
}
 div, button, input, textarea, a, img {
     box-sizing: border-box;
}
 .round {
     border-radius: 2500px;
}
 .radius {
     border-radius: 3px;
}
/* ================== 图片 ==================== */
 img {
     max-width: 100%;
     display: inline-block;
     position: relative;
     z-index: 0;
}
 img.loading::before {
     content: "";
     background-color: #f5f5f5;
     display: block;
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: -2;
}
 img.loading::after {
     content: "\e7f1";
     font-family: "cuIcon";
     position: absolute;
     top: 0;
     left: 0;
     width: 16px;
     height: 16px;
     line-height: 16px;
     right: 0;
     bottom: 0;
     z-index: -1;
     font-size: 16px;
     margin: auto;
     color: #ccc;
     -webkit-animation: cuIcon-spin 2s infinite linear;
     animation: cuIcon-spin 2s infinite linear;
     display: block;
}
 .response {
     width: 100%;
}
/* ================== 边框 ==================== */
/* -- 实线 -- */
 .solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .solids, .solids-top, .solids-right, .solids-bottom, .solids-left, .dashed, .dashed-top, .dashed-right, .dashed-bottom, .dashed-left {
     position: relative;
}
 .solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after, .solid-left::after, .solids::after, .solids-top::after, .solids-right::after, .solids-bottom::after, .solids-left::after, .dashed::after, .dashed-top::after, .dashed-right::after, .dashed-bottom::after, .dashed-left::after {
     content: " ";
     width: 200%;
     height: 200%;
     position: absolute;
     top: 0;
     left: 0;
     border-radius: inherit;
     transform: scale(0.5);
     transform-origin: 0 0;
     pointer-events: none;
     box-sizing: border-box;
}
 .solid::after {
     border: 1px solid rgba(0, 0, 0, 0.1);
}
 .solid-top::after {
     border-top: 1px solid rgba(0, 0, 0, 0.1);
}
 .solid-right::after {
     border-right: 1px solid rgba(0, 0, 0, 0.1);
}
 .solid-bottom::after {
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
 .solid-left::after {
     border-left: 1px solid rgba(0, 0, 0, 0.1);
}
 .solids::after {
     border: 4px solid #eee;
}
 .solids-top::after {
     border-top: 4px solid #eee;
}
 .solids-right::after {
     border-right: 4px solid #eee;
}
 .solids-bottom::after {
     border-bottom: 4px solid #eee;
}
 .solids-left::after {
     border-left: 4px solid #eee;
}
/* -- 虚线 -- */
 .dashed::after {
     border: 1px dashed #ddd;
}
 .dashed-top::after {
     border-top: 1px dashed #ddd;
}
 .dashed-right::after {
     border-right: 1px dashed #ddd;
}
 .dashed-bottom::after {
     border-bottom: 1px dashed #ddd;
}
 .dashed-left::after {
     border-left: 1px dashed #ddd;
}
/* -- 阴影 -- */
 .shadow[class*='white'] {
     --ShadowSize: 0 1px 3px;
}
 .shadow-lg {
     --ShadowSize: 0px 20px 50px 0px;
}
 .shadow-warp {
     position: relative;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
 .shadow-warp:before, .shadow-warp:after {
     position: absolute;
     content: "";
     top: 10px;
     bottom: 15px;
     left: 10px;
     width: 50%;
     box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
     transform: rotate(-3deg);
     z-index: -1;
}
 .shadow-warp:after {
     right: 10px;
     left: auto;
     transform: rotate(3deg);
}
 .shadow-blur {
     position: relative;
}
 .shadow-blur::before {
     content: "";
     display: block;
     background: inherit;
     filter: blur(5px);
     position: absolute;
     width: 100%;
     height: 100%;
     top: 5px;
     left: 5px;
     z-index: -1;
     opacity: 0.4;
     transform-origin: 0 0;
     border-radius: inherit;
     transform: scale(1, 1);
}
 .block {
     display: block;
}
/* ================== 布局 ==================== */
/* -- flex弹性布局 -- */
 .flex {
     display: flex;
}
 .basis-xs {
     flex-basis: 20%;
}
 .basis-sm {
     flex-basis: 40%;
}
 .basis-df {
     flex-basis: 50%;
}
 .basis-lg {
     flex-basis: 60%;
}
 .basis-xl {
     flex-basis: 80%;
}
 .flex-sub {
     flex: 1;
}
 .flex-twice {
     flex: 2;
}
 .flex-treble {
     flex: 3;
}
 .flex-direction {
     flex-direction: column;
}
 .flex-wrap {
     flex-wrap: wrap;
}
 .align-start {
     align-items: flex-start;
}
 .align-end {
     align-items: flex-end;
}
 .align-center {
     align-items: center;
}
 .align-stretch {
     align-items: stretch;
}
 .self-start {
     align-self: flex-start;
}
 .self-center {
     align-self: flex-center;
}
 .self-end {
     align-self: flex-end;
}
 .self-stretch {
     align-self: stretch;
}
 .align-stretch {
     align-items: stretch;
}
 .justify-start {
     justify-content: flex-start;
}
 .justify-end {
     justify-content: flex-end;
}
 .justify-center {
     justify-content: center;
}
 .justify-between {
     justify-content: space-between;
}
 .justify-around {
     justify-content: space-around;
}
/* -- 内外边距 -- */
 .margin-0 {
     margin: 0;
}
 .margin-xs {
     margin: 10px;
}
 .margin-sm {
     margin: 20px;
}
 .margin {
     margin: 30px;
}
 .margin-lg {
     margin: 40px;
}
 .margin-xl {
     margin: 50px;
}
 .margin-top-xs {
     margin-top: 10px;
}
 .margin-top-sm {
     margin-top: 20px;
}
 .margin-top {
     margin-top: 30px;
}
 .margin-top-lg {
     margin-top: 40px;
}
 .margin-top-xl {
     margin-top: 50px;
}
 .margin-right-xs {
     margin-right: 10px;
}
 .margin-right-sm {
     margin-right: 20px;
}
 .margin-right {
     margin-right: 30px;
}
 .margin-right-lg {
     margin-right: 40px;
}
 .margin-right-xl {
     margin-right: 50px;
}
 .margin-bottom-xs {
     margin-bottom: 10px;
}
 .margin-bottom-sm {
     margin-bottom: 20px;
}
 .margin-bottom {
     margin-bottom: 30px;
}
 .margin-bottom-lg {
     margin-bottom: 40px;
}
 .margin-bottom-xl {
     margin-bottom: 50px;
}
 .margin-left-xs {
     margin-left:10px;
}
 .margin-left-sm {
     margin-left:20px;
}
 .margin-left {
     margin-left: 30px;
}
 .margin-left-lg {
     margin-left: 40px;
}
 .margin-left-xl {
     margin-left: 50px;
}
 .margin-lr-xs {
     margin-left: 10px;
     margin-right: 10px;
}
 .margin-lr-sm {
     margin-left: 20px;
     margin-right: 20px;
}
 .margin-lr {
     margin-left: 30px;
     margin-right: 30px;
}
 .margin-lr-lg {
     margin-left: 40px;
     margin-right: 40px;
}
 .margin-lr-xl {
     margin-left: 50px;
     margin-right: 50px;
}
 .margin-tb-xs {
     margin-top: 10px;
     margin-bottom: 10px;
}
 .margin-tb-sm {
     margin-top: 20px;
     margin-bottom: 20px;
}
 .margin-tb {
     margin-top: 30px;
     margin-bottom: 30px;
}
 .margin-tb-lg {
     margin-top: 40px;
     margin-bottom: 40px;
}
 .margin-tb-xl {
     margin-top: 50px;
     margin-bottom: 50px;
}
 .padding-0 {
     padding: 0;
}
 .padding-xs {
     padding: 10px;
}
 .padding-sm {
     padding: 20px;
}
 .padding {
     padding: 30px;
}
 .padding-lg {
     padding: 40px;
}
 .padding-xl {
     padding: 50px;
}
 .padding-top-xs {
     padding-top: 10px;
}
 .padding-top-sm {
     padding-top: 20px;
}
 .padding-top {
     padding-top: 30px;
}
 .padding-top-lg {
     padding-top: 40px;
}
 .padding-top-xl {
     padding-top: 50px;
}
 .padding-right-xs {
     padding-right:10px;
}
 .padding-right-sm {
     padding-right: 20px;
}
 .padding-right {
     padding-right: 30px;
}
 .padding-right-lg {
     padding-right: 40px;
}
 .padding-right-xl {
     padding-right:50px;
}
 .padding-bottom-xs {
     padding-bottom: 10px;
}
 .padding-bottom-sm {
     padding-bottom: 20px;
}
 .padding-bottom {
     padding-bottom: 30px;
}
 .padding-bottom-lg {
     padding-bottom: 40px;
}
 .padding-bottom-xl {
     padding-bottom: 50px;
}
 .padding-left-xs {
     padding-left: 10px;
}
 .padding-left-sm {
     padding-left: 20px;
}
 .padding-left {
     padding-left: 30px;
}
 .padding-left-lg {
     padding-left: 40px;
}
 .padding-left-xl {
     padding-left: 50px;
}
 .padding-lr-xs {
     padding-left: 10px;
     padding-right: 10px;
}
 .padding-lr-sm {
     padding-left: 20px;
     padding-right: 20px;
}
 .padding-lr {
     padding-left: 30px;
     padding-right: 30px;
}
 .padding-lr-lg {
     padding-left: 40px;
     padding-right: 40px;
}
 .padding-lr-xl {
     padding-left: 50px;
     padding-right: 50px;
}
 .padding-tb-xs {
     padding-top: 10px;
     padding-bottom: 10px;
}
 .padding-tb-sm {
     padding-top: 20px;
     padding-bottom: 20px;
}
 .padding-tb {
     padding-top: 30px;
     padding-bottom: 30px;
}
 .padding-tb-lg {
     padding-top: 40px;
     padding-bottom: 40px;
}
 .padding-tb-xl {
     padding-top: 50px;
     padding-bottom: 50px;
}
/* -- 浮动 -- */
 .cf::after, .cf::before {
     content: " ";
     display: table;
}
 .cf::after {
     clear: both;
}
 .fl {
     float: left;
}
 .fr {
     float: right;
}
/* ================== 背景 ==================== */
 .line-red::after, .lines-red::after {
     border-color: var(--red);
}
 .line-orange::after, .lines-orange::after {
     border-color: var(--orange);
}
 .line-yellow::after, .lines-yellow::after {
     border-color: var(--yellow);
}
 .line-olive::after, .lines-olive::after {
     border-color: var(--olive);
}
 .line-green::after, .lines-green::after {
     border-color: var(--green);
}
 .line-cyan::after, .lines-cyan::after {
     border-color: var(--cyan);
}
 .line-blue::after, .lines-blue::after {
     border-color: var(--blue);
}
 .line-purple::after, .lines-purple::after {
     border-color: var(--purple);
}
 .line-mauve::after, .lines-mauve::after {
     border-color: var(--mauve);
}
 .line-pink::after, .lines-pink::after {
     border-color: var(--pink);
}
 .line-brown::after, .lines-brown::after {
     border-color: var(--brown);
}
 .line-grey::after, .lines-grey::after {
     border-color: var(--grey);
}
 .line-gray::after, .lines-gray::after {
     border-color: var(--gray);
}
 .line-black::after, .lines-black::after {
     border-color: var(--black);
}
 .line-white::after, .lines-white::after {
     border-color: var(--white);
}
 .bg-red {
     background-color: var(--red);
     color: var(--white);
}
 .bg-orange {
     background-color: var(--orange);
     color: var(--white);
}
 .bg-yellow {
     background-color: var(--yellow);
     color: var(--black);
}
 .bg-olive {
     background-color: var(--olive);
     color: var(--white);
}
 .bg-green {
     background-color: var(--green);
     color: var(--white);
}
 .bg-cyan {
     background-color: var(--cyan);
     color: var(--white);
}
 .bg-blue {
     background-color: var(--blue);
     color: var(--white);
}
 .bg-purple {
     background-color: var(--purple);
     color: var(--white);
}
 .bg-mauve {
     background-color: var(--mauve);
     color: var(--white);
}
 .bg-pink {
     background-color: var(--pink);
     color: var(--white);
}
 .bg-brown {
     background-color: var(--brown);
     color: var(--white);
}
 .bg-grey {
     background-color: var(--grey);
     color: var(--white);
}
 .bg-gray {
     background-color: #f0f0f0;
     color: var(--black);
}
 .bg-black {
     background-color: var(--black);
     color: var(--white);
}
 .bg-white {
     background-color: var(--white);
     color: var(--darkGray);
}
 .bg-shadeTop {
     background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
     color: var(--white);
}
 .bg-shadeBottom {
     background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
     color: var(--white);
}
 .bg-red.light {
     color: var(--red);
     background-color: var(--redLight);
}
 .bg-orange.light {
     color: var(--orange);
     background-color: var(--orangeLight);
}
 .bg-yellow.light {
     color: var(--yellow);
     background-color: var(--yellowLight);
}
 .bg-olive.light {
     color: var(--olive);
     background-color: var(--oliveLight);
}
 .bg-green.light {
     color: var(--green);
     background-color: var(--greenLight);
}
 .bg-cyan.light {
     color: var(--cyan);
     background-color: var(--cyanLight);
}
 .bg-blue.light {
     color: var(--blue);
     background-color: var(--blueLight);
}
 .bg-purple.light {
     color: var(--purple);
     background-color: var(--purpleLight);
}
 .bg-mauve.light {
     color: var(--mauve);
     background-color: var(--mauveLight);
}
 .bg-pink.light {
     color: var(--pink);
     background-color: var(--pinkLight);
}
 .bg-brown.light {
     color: var(--brown);
     background-color: var(--brownLight);
}
 .bg-grey.light {
     color: var(--grey);
     background-color: var(--greyLight);
}
 .bg-gradual-red {
     background-image: var(--gradualRed);
     color: var(--white);
}
 .bg-gradual-orange {
     background-image: var(--gradualOrange);
     color: var(--white);
}
 .bg-gradual-green {
     background-image: var(--gradualGreen);
     color: var(--white);
}
 .bg-gradual-purple {
     background-image: var(--gradualPurple);
     color: var(--white);
}
 .bg-gradual-pink {
     background-image: var(--gradualPink);
     color: var(--white);
}
 .bg-gradual-blue {
     background-image: var(--gradualBlue);
     color: var(--white);
}
 .shadow[class*="-red"] {
     box-shadow: var(--ShadowSize) var(--redShadow);
}
 .shadow[class*="-orange"] {
     box-shadow: var(--ShadowSize) var(--orangeShadow);
}
 .shadow[class*="-yellow"] {
     box-shadow: var(--ShadowSize) var(--yellowShadow);
}
 .shadow[class*="-olive"] {
     box-shadow: var(--ShadowSize) var(--oliveShadow);
}
 .shadow[class*="-green"] {
     box-shadow: var(--ShadowSize) var(--greenShadow);
}
 .shadow[class*="-cyan"] {
     box-shadow: var(--ShadowSize) var(--cyanShadow);
}
 .shadow[class*="-blue"] {
     box-shadow: var(--ShadowSize) var(--blueShadow);
}
 .shadow[class*="-purple"] {
     box-shadow: var(--ShadowSize) var(--purpleShadow);
}
 .shadow[class*="-mauve"] {
     box-shadow: var(--ShadowSize) var(--mauveShadow);
}
 .shadow[class*="-pink"] {
     box-shadow: var(--ShadowSize) var(--pinkShadow);
}
 .shadow[class*="-brown"] {
     box-shadow: var(--ShadowSize) var(--brownShadow);
}
 .shadow[class*="-grey"] {
     box-shadow: var(--ShadowSize) var(--greyShadow);
}
 .shadow[class*="-gray"] {
     box-shadow: var(--ShadowSize) var(--grayShadow);
}
 .shadow[class*="-black"] {
     box-shadow: var(--ShadowSize) var(--blackShadow);
}
 .shadow[class*="-white"] {
     box-shadow: var(--ShadowSize) var(--blackShadow);
}
 .text-shadow[class*="-red"] {
     text-shadow: var(--ShadowSize) var(--redShadow);
}
 .text-shadow[class*="-orange"] {
     text-shadow: var(--ShadowSize) var(--orangeShadow);
}
 .text-shadow[class*="-yellow"] {
     text-shadow: var(--ShadowSize) var(--yellowShadow);
}
 .text-shadow[class*="-olive"] {
     text-shadow: var(--ShadowSize) var(--oliveShadow);
}
 .text-shadow[class*="-green"] {
     text-shadow: var(--ShadowSize) var(--greenShadow);
}
 .text-shadow[class*="-cyan"] {
     text-shadow: var(--ShadowSize) var(--cyanShadow);
}
 .text-shadow[class*="-blue"] {
     text-shadow: var(--ShadowSize) var(--blueShadow);
}
 .text-shadow[class*="-purple"] {
     text-shadow: var(--ShadowSize) var(--purpleShadow);
}
 .text-shadow[class*="-mauve"] {
     text-shadow: var(--ShadowSize) var(--mauveShadow);
}
 .text-shadow[class*="-pink"] {
     text-shadow: var(--ShadowSize) var(--pinkShadow);
}
 .text-shadow[class*="-brown"] {
     text-shadow: var(--ShadowSize) var(--brownShadow);
}
 .text-shadow[class*="-grey"] {
     text-shadow: var(--ShadowSize) var(--greyShadow);
}
 .text-shadow[class*="-gray"] {
     text-shadow: var(--ShadowSize) var(--grayShadow);
}
 .text-shadow[class*="-black"] {
     text-shadow: var(--ShadowSize) var(--blackShadow);
}
 .bg-img {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
}
 .bg-mask {
     background-color: var(--black);
     position: relative;
}
 .bg-mask::after {
     content: "";
     border-radius: inherit;
     width: 100%;
     height: 100%;
     display: block;
     background-color: rgba(0, 0, 0, 0.4);
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
}
 .bg-mask view, .bg-mask cover-view {
     z-index: 5;
     position: relative;
}
 .bg-video {
     position: relative;
}
 .bg-video video {
     display: block;
     height: 100%;
     width: 100%;
     -o-object-fit: cover;
     object-fit: cover;
     position: absolute;
     top: 0;
     z-index: 0;
     pointer-events: none;
}
/* ================== 文本 ==================== */
 .text-xs {
     font-size: 10px;
}
 .text-sm {
     font-size: 12px;
}
 .text-df {
     font-size: 14px;
}
 .text-lg {
     font-size: 16px;
}
 .text-xl {
     font-size: 18px;
}
 .text-xxl {
     font-size: 22px;
}
 .text-sl {
     font-size: 40px;
}
 .text-xsl {
     font-size: 60px;
}
 .text-Abc {
     text-transform: Capitalize;
}
 .text-ABC {
     text-transform: Uppercase;
}
 .text-abc {
     text-transform: Lowercase;
}
 .text-price::before {
     content: "¥";
     font-size: 80%;
     margin-right: 2px;
}
 .text-cut {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
}
 .text-bold {
     font-weight: bold;
}
 .text-center {
     text-align: center;
}
 .text-content {
     line-height: 1.6;
}
 .text-left {
     text-align: left;
}
 .text-right {
     text-align: right;
}
 .text-red, .line-red, .lines-red {
     color: var(--red);
}
 .text-orange, .line-orange, .lines-orange {
     color: var(--orange);
}
 .text-yellow, .line-yellow, .lines-yellow {
     color: var(--yellow);
}
 .text-olive, .line-olive, .lines-olive {
     color: var(--olive);
}
 .text-green, .line-green, .lines-green {
     color: var(--green);
}
 .text-cyan, .line-cyan, .lines-cyan {
     color: var(--cyan);
}
 .text-blue, .line-blue, .lines-blue {
     color: var(--blue);
}
 .text-purple, .line-purple, .lines-purple {
     color: var(--purple);
}
 .text-mauve, .line-mauve, .lines-mauve {
     color: var(--mauve);
}
 .text-pink, .line-pink, .lines-pink {
     color: var(--pink);
}
 .text-brown, .line-brown, .lines-brown {
     color: var(--brown);
}
 .text-grey, .line-grey, .lines-grey {
     color: var(--grey);
}
 .text-gray, .line-gray, .lines-gray {
     color: var(--gray);
}
 .text-black, .line-black, .lines-black {
     color: var(--black);
}
 .text-white, .line-white, .lines-white {
     color: var(--white);
}